<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片水印并上传示例</title>
</head>
<body>
<input type="file" id="imageFile" accept="image/*">
<button onclick="addWatermark()">添加水印并上传</button>

<script th:src="@{/js/watermark.js}"></script>
<script>
    function addWatermark() {
        const imageFileInput = document.getElementById('imageFile');
        const file = imageFileInput.files[0];

        if (!file) {
            alert('请先选择图片！');
            return;
        }
        var watermarks = []
        watermarks.push("广西壮族自2心2圩街2汇11111111111111111111111112")
        watermarks.push("2024-05-11 19:13:04 ")
        watermarks.push("李华 130733376")
        const promises = [];
        for (let i = 0; i < 3; i++) {
            promises.push(addWatermarkAndUpload(file, watermarks))
        }
        Promise.all(promises)
            .then(results => {
                // 当所有Promise都完成时，results数组包含所有结果
                console.log(results);
                // 在这里你可以一起处理所有结果
                const formData = new FormData();
                for (let i = 0; i < results.length; i++) {
                    console.log(results[i])
                    formData.append('files', results[i], results[i].name);
                }
                return formData;
            })
            .then(formData => {
                //上传
               return  fetch('/common/uploads', {
                    method: 'POST',
                    body: formData
                });
            })
            .then(response => {
                // 处理响应
                return response.json();
            })
            .then(data => {
                // 处理返回的数据，url
                console.log(data);
                //其他操作操作
            })
            .catch(error => {
                // 处理错误
                console.error('Error:', error);
            })
    }
</script>
</body>
</html>